<template>
	<div class="app-container">
		<div class="section-one">
			<div class="header">
				<img v-if="!isLoggedIn" class="img" src="../../static/image/moren.png" />
				<img v-else class="img" src="../../static/navi/success.png" />
				<button v-if="!isLoggedIn" class="btn" @click="handleLogin">点击登录</button>
				<button v-else class="btn1" @click="logout">退出登录</button>
			</div>
			<div class="main-content">
				<span>欢迎来到袁隆平杂交水稻科学园</span>
			</div>
		</div>

		<div class="section-two">
			<div class="left-aligned-button">
				<text class="btn" @click="showRecords()">预约记录</text>
			</div>
			<view v-if="isLoggedIn">
			<img v-if="isNoRecords" class="icon" src="../../static/image/img.png" />
			<view v-if="isNoRecords" class="no-records">
				<text>暂无预约记录</text>
			</view> 
		    <view v-if="userInfo.name" class="jilu1" @click="toperson">
		      <view class="row">
		        <view>预约类型:个人预约</view>
		        <view>预约人:{{userInfo.name}}</view>
		      </view>
		      <view class="row">
		        <view>预约日期:{{userInfo.date}}</view>
		        <view>预约时间:{{userInfo.time}}</view>
		      </view>
		    </view>
		    <view v-if="groupInfo.teamName" class="jilu1" @click="togroup">
		      <view class="row">
		        <view>预约类型:团队预约</view>
		        <view>团队名称:{{groupInfo.teamName}}</view>
		      </view>
		      <view class="row">
		        <view>预约日期:{{groupInfo.date}}</view>
		        <view>预约时间:{{groupInfo.time}}</view>
		      </view>
		    </view>
			</view>
			<view v-if="!isLoggedIn">
				<img v-if="isNo11" class="icon" src="../../static/image/img.png" />
				<view v-if="isNo11" class="no-records">
					<text>暂未登录，请登录后再试</text>
				</view> 
			</view>
		</div>
		<div class="footer">
			<span>技术支持：中北大学</span>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {
				name: '',
				idType: '',
				idNumber: '',
				phone: '',
				companions: '',
			},
			groupInfo: { 
				teamName: '',
				date: '',
				time: '',
			},
			isLoggedIn: false,
			records: []
		};
	},
	computed: {
		isNoRecords() {
			return !this.userInfo.name && !this.groupInfo.teamName;
		},
		isNo11() {
			return !this.userInfo.name || !this.groupInfo.teamName ||this.userInfo.name||this.groupInfo.teamName;
		}
	},
	mounted() {
		this.checkLoginStatus();
		this.loadUserData();
		this.loadGroupData();
	},
	methods: {
		checkLoginStatus() {
			uni.getStorage({
				key: 'isLoggedIn',
				success: (res) => {
					this.isLoggedIn = res.data;
				}
			});
		},
		loadUserData() {
			uni.getStorage({
				key: 'userData',
				success: (res) => {
					this.userInfo = JSON.parse(res.data);
				}
			});
		},
		loadGroupData() {
			uni.getStorage({
				key: 'groupData',
				success: (res) => {
					this.groupInfo = JSON.parse(res.data);
				}
			});
		},
		handleLogin() {
			uni.showToast({
				title: '登录成功',
				icon: 'success',
				duration: 2000
			});
			this.isLoggedIn = true;

			uni.setStorage({
				key: 'isLoggedIn',
				data: true,
			});
		},
		logout() {
			this.isLoggedIn = false;

			uni.setStorage({
				key: 'isLoggedIn',
				data: false,
			});

			uni.showToast({
				title: '已退出登录',
				icon: 'none',
				duration: 2000
			});
		},
		toperson() {
			uni.navigateTo({
				url: '/pages/ScanQRPersonal/ScanQRPersonal'
			});
		},
		togroup() {
			uni.navigateTo({
				url: '/pages/ScanQR/ScanQR'
			});
		},
		showRecords() {
			uni.reLaunch({
				url: '/pages/login/login'
			});
			console.log("显示预约记录的逻辑未实现");
		},
	},
	watch: {
		userInfo: {
			handler(newVal) {
				console.log('用户信息更新:', newVal);
			},
			deep: true
		},
		groupInfo: {
			handler(newVal) {
				console.log('团队信息更新:', newVal);
			},
			deep: true
		}
	}
}
</script>
<style>
	.app-container {
		display: flex; 
		flex-direction: column;
		justify-content: flex-start; 
		align-items: center; 
		height: 95vh;
		/* 根据需要调整高度 */
		padding: 20px; 
		/* 添加一些内边距以避免内容紧贴边缘 */
		box-sizing: border-box;
		/* 确保内边距不会增加总宽度 */
		background-color: #f0f0f0;
	}

	.btn1 {
		/* 移除所有背景色和边框 */
		background-color: transparent;
		/* 确保背景是透明的 */
		border-color: white;
		/* 移除边框 */
		/* 添加一些内边距和外边距以改善可读性 */
		padding: 10px 20px;
		margin: 5px 0;
		/* 设置文字样式 */
		color: black;
		font-size: 15px;
		font-weight: bold;
		text-align: center;
		/* 如果需要的话，确保文本居中 */
		cursor: pointer;
		/* 鼠标悬停时显示手指指针，表明可点击 */
	}

	.button:hover {
		color: darkgray;
		/* 悬停时文本颜色变深灰 */
		/* 如果需要，可以在这里添加其他悬停效果，比如背景色变化 */
	}

	.left-aligned-button {
		position: absolute;
		/* 绝对定位，使其脱离文档流 */
		top: 20rpx;
		/* 顶部偏移，根据需要调整 */
		left: 0rpx;
		/* 左侧偏移，根据需要调整 */
	}
	
	.jilu1 {
		margin-top: 20px;
		border-radius: 20px; /* 圆角 */
		padding: 10px; /* 内边距，增加舒适度 */
		border: 1px solid black; /* 外边框，颜色和厚度可调整 */
		font-size: 13px; /* 字体大小 */
		box-shadow: 0 10px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
	}
	.row {
		width: 80%;
	    display: flex; /* 使用flexbox */
		justify-content: space-between; /* 两个项之间平均分配空间 */
		align-items: center; /* 垂直居中对齐 */
	    margin-bottom: 5px; /* 行间距 */
		margin-left: 10%;
	}

	.img {
		width: 50px;
		height: 50px;
		margin-top: -30rpx;
		margin-right: 5px;
		text-align: center;
	}

	.icon {
		margin-top: 180rpx;
		width: 141px;
		height: 130px;
		margin-left: 95px;

	}

	.no-records {
		width: 100%;
		/* 可选，但有助于确保文本宽度 */
		text-align: center;
		margin-bottom: 90px;
		/* 文本居中 */
	}

	.footer {
		position: fixed;
		/* 固定在页面上 */
		bottom: 7%;
		/* 紧贴页面底部 */
		width: 100%;
		/* 宽度占满整个屏幕 */
		text-align: center;
		/* 文字居中显示 */
		background-color: transparent;
		/* 背景色，可选 */
		padding: 10px 0;
		/* 上下内边距 */
	}


	.header,
	.main-content {
		/* 可以在这里添加具体的样式 */
		margin-top: 10px;
		width: 100%;
		/* 确保内容宽度 */
		text-align: center;
		/* 如果需要，可以将主内容居中 */
	}

	.section-one {
		/* 为两个区域添加一些间距和样式 */
		margin-top: 10rpx;
		margin-bottom: 20px;
		/* 或者根据需要调整 */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		/* 底部阴影效果 */
		padding: 20px;
		/* 内部填充 */
		border-radius: 8px;
		/* 边框圆角 */
		background-color: white;
		width: 95%;
		/* 其他区域样式 */
	}

	.section-two {
		/* 为两个区域添加一些间距和样式 */
		position: relative;
		margin-bottom: 80px;
		/* 或者根据需要调整 */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		/* 底部阴影效果 */
		padding: 20px;
		/* 内部填充 */
		border-radius: 8px;
		/* 边框圆角 */
		background-color: white;
		/* 其他区域样式 */
		width: 95%;
	}
</style>